<template>
<el-container >
  <el-header>
    <div class="header" id="userid">
      <div class="logo">
        <h1>看装修管理员后台</h1>
      </div>
      <div class="topnav-right">
        <span class="exit" @click="exit()">退出系统</span>
      </div>
    </div>
  </el-header>
  <el-container class="bottom-box">
    <el-aside width="230px">
      <el-menu
      unique-opened
      class="el-menu-vertical-demo"
      background-color="#fafafa"
      text-color="#646464"
      active-text-color="#409eff"
      style="text-align:left"
      :default-active="link"
      router>
        <div v-for="(item, index) in menu" v-bind:key="index">
          <el-submenu v-bind:index="item.index"  v-if="item.type == 0">
            <template slot="title">
              <i v-bind:class="item.class"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item-group v-for="(item, index) in item.submenu" v-bind:key="index">
              <el-menu-item v-bind:index="item.index">{{item.title}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-bind:index="item.index" v-if="item.type == 1">
            <i v-bind:class="item.class"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-aside>
    <el-main>
      <div class="main-box">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  data () {
    return {
      link: '',
      menu: []
    }
  },
  methods: {
    exit: function () {
      this.$router.push({ name: 'login' })
    }
  },
  mounted () {
    var that = this
    var state = localStorage.getItem('state')
    this.link = this.$route.path.split('/')[1]
    if (state === '2') {
      that.menu = that.$pub.menu1
    } else {
      that.menu = that.$pub.menu0
    }
  },
  watch: {
    $route (to, from) {
      this.link = to.name
    }
  }
}
</script>

<style>
.top-box{
  width: 100%;
}
.el-menu{
  border-right: none;
}
.bottom-box{
  width: 100%;
  min-height: 100%;
  position: absolute;
  padding-top: 60px;
}
.el-header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0!important;
  z-index: 20;
}
.header{
  width: 100%;
  height: 60px;
  background: #545c64;
}
.el-aside{
  background: #fafafa;
}
.el-menu{
  height: 100%;
}
.wrap-rightbox{
  width: 100%;
  padding-left: 230px;
}
.logo{
  width: 205px;
  height: 59px;
  float: left;
}
.logo h1{
  height: 24px;
  font-size: 22px;
  line-height: 22px;
  margin-top: 19px;
  color: #fff;
  padding-left: 22px;
  font-weight: normal;
  position: relative;
}
.topnav-right{
  float: right;
  font-size: 18px;
  color: #fff;
  margin-right: 34px;
  margin-top: 17px;
}
.exit{
  display: block;
  float: left;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
  margin-left: 20px;
  color: #efefef;
  font-size: 12px;
  border: #d7d7d7 solid 1px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
</style>
